<template>
	<div class="theContent">
		<contentTitle title="销售流向情况"></contentTitle>
		<contentBox class="theEchart"><Echart id="right1" :options="option" /></contentBox>
	</div>
</template>

<script>
import contentBox from '@/components/contentBox.vue';
import contentTitle from '@/components/contentTitle.vue';
import { listByWay } from '@/api/category.js';
import baseCategoryMixins from './mixins/baseCategoryMixins.js';

export default {
	name:"Right1CategorySaleWay",
	components: {
		contentBox,
		contentTitle
	},
	mixins: [baseCategoryMixins],
	data() {
		return {
			query: {
				year: new Date().getFullYear(),
				categoryId: 1 //1-香榧 2-笋竹 3-山黄精
			},
			dataList: [],
			type: 1, //1-产值  2-产量
			buttonList: [{ value: 1, label: '产值' }, { value: 2, label: '产量' }],
			option: {}
		};
	},
	computed: {
		seriesDataList() {
			return this.dataList.map(item => {
				return {
					name: item.name,
					value: this.type == 1 ? item.amount : item.count,
					percent: this.type == 1 ? item.amountPercent : item.countPercent
				};
			});
		},
		unit() {
			return this.type == 1 ? '万元' : '吨';
		}
	},
	methods: {
		loadData() {
			listByWay(this.query).then(result => {
				console.log('listByWay Result = ', result);
				this.dataList = result.data;
				//计算百分比值
				let countTotal = eval(this.dataList.map(item => item.count).join('+'));
				let amountTotal = eval(this.dataList.map(item => item.amount).join('+'));
				this.dataList.forEach(item => {
					item.countPercent = ((item.count * 100) / countTotal).toFixed(2) + '%';
					item.amountPercent = ((item.amount * 100) / amountTotal).toFixed(2) + '%';
				});

				this.$nextTick(() => {
					this.initOption();
				});
			});
		},
		initOption() {
			this.option = {
				tooltip: {
					trigger: 'item'
				},
				legend: {
					// show:false,
					orient: 'vertical',
					top: 'center',
					right: '5%',
					itemHeight: 16,
					itemGap: 60,
					icon: 'circle', //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
					textStyle: {
						color: 'inherit',
						fontSize: 40,
						rich: {
							a: {
								width: 100,
								fontSize: 30
					 		// color: '#DBDBDB',
							},
							b: {
								width: 220,
								fontSize: 40,
								// color: '#FFFFFF',
								align: 'right'
					  },
							c: {
								width: 180,
								fontSize: 40,
								align: 'right'
							}
						},
						padding: [5, 0, 0, 10] //[上、右、下、左]
					},
					formatter: name => {
						const item = this.option.series[0].data.find(item => item.name === name);
						let value = item && item.value + this.unit;
						return `{a|${name}}{b|${value}}{c|${item.percent}}`;
					}
				},
				series: [
					{
						name: '产业分布',
						type: 'pie',
						roseType: 'radius', //area
						left: '-60%',
						radius: ['0%', '70%'],
						// avoidLabelOverlap: false,
						label: {
							show: false
						},
						labelLine: {
							show: false
						},
						data: this.seriesDataList,
						color: ['#0198F3', '#00CE7D', '#F7931A', '#884FFC']
					}
				]
			};
		},

		onClickButton() {
			//通过参数绑定传值  :cur.sync="type"
			this.initOption();
		}
	}
};
</script>
<style lang="scss" scoped>
.theContent {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;

	.theEchart {
		flex: 1;
	}
	.theButton {
		margin: 0 10px;

		font-size: 20px;
		line-height: 38px;
		color: #ffffff;
		text-align: center;
		cursor: pointer;
	}
	.active {
		background: linear-gradient(180deg, rgba(247, 147, 26, 0) 0%, rgba(247, 147, 26, 0.4) 100%);
	}
}
</style>
